<!-- Site Setting Panel -->
  <section id="settings" data-ng-include=" 'views/settings/settings.html' " style="display:none"></section>
<!-- Site Setting Panel End -->

<!-- Page Header Start -->
<div class="pageheader">
  <h2><i class="fa fa-home"></i> Angular Select </h2>
  <div class="breadcrumb-wrapper hidden-xs"> <span class="label">You are here:</span>
    <ol class="breadcrumb">
      <li> <a href="index.html"> Home </a> </li>
      <li class="active"> Angular Select </li>
    </ol>
  </div>
</div>
<!-- Page Header End -->

<div class="page">

  <div class="row">
    <div class="col-lg-12">       
      <!-- Input -->
      <section class="panel panel-default">
        <h4 class="nm pad-15"> Angular select <strong>inside a Bootstrap form</strong> </h4>
        <div class="panel-body" ng-controller="SelectCtrl">
          <form class="form-horizontal">
 
            <div class="form-group">
              <label for="" class="col-sm-2">Default</label>
              <div class="col-sm-10">
                <ui-select ng-model="person.selected" theme="bootstrap">
                  <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
                  <ui-select-choices repeat="item in people | filter: $select.search">
                    <div ng-bind-html="item.name | highlight: $select.search"></div>
                    <small ng-bind-html="item.email | highlight: $select.search"></small> </ui-select-choices>
                </ui-select>
              </div>
            </div>
 
            <div class="form-group">
              <label for="" class="col-sm-2">Grouped</label>
              <div class="col-sm-10">
                <ui-select ng-model="person.selected" theme="bootstrap">
                  <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
                  <ui-select-choices group-by="'country'" repeat="item in people | filter: $select.search"> <span ng-bind-html="item.name | highlight: $select.search"></span> <small ng-bind-html="item.email | highlight: $select.search"></small> </ui-select-choices>
                </ui-select>
              </div>
            </div>
 
            <div class="form-group">
              <label for="" class="col-sm-2">With a clear button</label>
              <div class="col-sm-10">
                <div class="input-group">
                  <ui-select allow-clear ng-model="person.selected" theme="bootstrap">
                    <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
                    <ui-select-choices repeat="item in people | filter: $select.search"> <span ng-bind-html="item.name | highlight: $select.search"></span> <small ng-bind-html="item.email | highlight: $select.search"></small> </ui-select-choices>
                  </ui-select>
                  <span class="input-group-btn">
                  <button ng-click="person.selected = undefined" class="btn btn-default"> <span class="glyphicon glyphicon-trash"></span> </button>
                  </span> </div>
              </div>
            </div>
 
            <div class="form-group">
              <label for="" class="col-sm-2">Disabled</label>
              <div class="col-sm-10">
                <ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="true">
                  <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
                  <ui-select-choices repeat="item in people | filter: $select.search">
                    <div ng-bind-html="item.name | highlight: $select.search"></div>
                    <small ng-bind-html="item.email | highlight: $select.search"></small> </ui-select-choices>
                </ui-select>
              </div>
            </div>
 
            <div class="form-group">
              <label for="" class="col-sm-2"> Simple </label>
              <div class="col-sm-10">
                <ui-select ng-model="personAsync.selected" theme="bootstrap" ng-disabled="disabled" style="min-width: 300px;" title="Single property binding with async data">
                  <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name || $select.selected}}</ui-select-match>
                  <ui-select-choices repeat="person.email as person in peopleAsync | propsFilter: {name: $select.search, age: $select.search}">
                    <div ng-bind-html="person.name | highlight: $select.search"></div>
                    <small> email: {{person.email}}
                    age: <span ng-bind-html="''+person.age | highlight: $select.search"></span> </small> </ui-select-choices>
                </ui-select>
              </div>
            </div>
 
            <div class="form-group">
              <label for="" class="col-sm-2">Grouped</label>
              <div class="col-sm-10">
                <ui-select ng-model="person.selected" theme="bootstrap" ng-disabled="disabled" style="min-width: 300px;" title="Choose a person">
                  <ui-select-match placeholder="Select a person in the list or search his name/age...">{{$select.selected.name}}</ui-select-match>
                  <ui-select-choices group-by="'country'" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
                    <div ng-bind-html="person.name | highlight: $select.search"></div>
                    <small> email: {{person.email}}
                    age: <span ng-bind-html="''+person.age | highlight: $select.search"></span> </small> </ui-select-choices>
                </ui-select>
              </div>
            </div>
 
            <div class="form-group">
              <label for="" class="col-sm-2">Multiple Selection - Type 1</label>
              <div class="col-sm-10">
                <ui-select multiple ng-model="multipleDemo.colors" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 100%;" title="Choose a color">
                  <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
                  <ui-select-choices repeat="color in availableColors | filter:$select.search"> {{color}} </ui-select-choices>
                </ui-select>
              </div>
            </div>
 
            <div class="form-group">
              <label for="" class="col-sm-2">Multiple Selection - Type 2</label>
              <div class="col-sm-10">
                <ui-select multiple ng-model="multipleDemo.selectedPeople" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 100%;">
                  <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
                  <ui-select-choices repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
                    <div ng-bind-html="person.name | highlight: $select.search"></div>
                    <small> email: {{person.email}}
                    age: <span ng-bind-html="''+person.age | highlight: $select.search"></span> </small> </ui-select-choices>
                </ui-select>
              </div>
            </div>
 
            <div class="form-group">
              <label for="" class="col-sm-2">Multiple Selection Type 3</label>
              <div class="col-sm-10">
                <ui-select multiple ng-model="multipleDemo.deSelectedPeople" on-remove="removed($item, $model)" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 100%;" title="Choose a person">
                  <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
                  <ui-select-choices repeat="person.email as person in people | propsFilter: {name: $select.search, age: $select.search}">
                    <div ng-bind-html="person.name | highlight: $select.search"></div>
                    <small> email: {{person.email}}
                    age: <span ng-bind-html="''+person.age | highlight: $select.search"></span> </small> </ui-select-choices>
                </ui-select>
              </div>
            </div>
 
            <div class="form-group">
              <label for="" class="col-sm-2">Multiple Select (Group by) Type 4</label>
              <div class="col-sm-10">
                <ui-select multiple ng-model="multipleDemo.selectedPeopleWithGroupBy" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 100%;" title="Choose a person">
                  <ui-select-match placeholder="Select person...">{{$item.name}} &lt;{{$item.email}}&gt;</ui-select-match>
                  <ui-select-choices group-by="someGroupFn" repeat="person in people | propsFilter: {name: $select.search, age: $select.search}">
                    <div ng-bind-html="person.name | highlight: $select.search"></div>
                    <small> email: {{person.email}}
                    age: <span ng-bind-html="''+person.age | highlight: $select.search"></span> </small> </ui-select-choices>
                </ui-select>
              </div>
            </div>
          </form>
        </div>
      </section>
    </div>
  </div>
</div>